<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Title</title>
</head>
<body>
<div id="app">
  <ul>
    <li v-for="item in letters" :key="item">{{item}}</li>
    <button @click="btnClick">按钮</button>
  </ul>
</div>
<script src="../js/vue.js"></script>
<script>
  const app = new Vue({
    el: '#app',
    data: {
      letters: ['A', 'B', 'C', 'D', 'E'],
    },
    methods: {
      btnClick() {
        // push    末尾添加一个或多个元素
        // pop   删掉最后一个元素
        //shift    删除第一个元素
        //unshift    在数组最前面添加一个或多个元素
        //splice    删除/插入/替换
        //splice(start)
        // this.letters.splice(1, 1)  // 删除第二个元素
        // this.letters.splice(1, 3)  // 删除从第二个元素开始的三个元素
        // this.letters.splice(1, 3, "s", "d", "f")    //替换
        // this.letters.splice(1, 0, "s", "d", "f")    //插入三个元素

        //sort
        // 注意通过索引值修改不是响应式的
        // this.letters[0] = "ddd"   //不向应
        // this.letters.splice(0,1,"ddd")  //响应
        // 或者使用set(要修改对象， 索引值，修改后的值)
        Vue.set(this.letters, 0, "bbb")
      }
    }
  })

  // ...可变参数 代表可以传入多个值
  function sum(...num) {
    console.log(num)
  }

  sum(20, 30, 40)
</script>
</body>
</html>
